<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Amaze UI Admin form Examples</title>
<meta name="description" content="这是一个form页面">
<meta name="keywords" content="form">
<% include("/common/inc/_css.html"){} %>

<style type="text/css">
#but {
	margin-left: 25%;
}

.am-form {
	margin-left: 20%;
	margin-right: 20%;
}
</style>
</head>
<body>
	<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->

	<% include("/common/inc/_header.html"){} %>

	<div class="am-cf admin-main">
		<!-- sidebar start -->
		<% include("/common/inc/_menu.html"){} %>
		<!-- sidebar end -->

		<!-- content start -->
		<div class="admin-content">
			<div class="admin-content-body">
				<div class="am-cf am-padding am-padding-bottom-0">
					<div class="am-fl am-cf">
						<strong class="am-text-primary am-text-lg">表单</strong> / <small>form</small>
					</div>
				</div>

				<hr>

				<form class="am-form" id="doc-vld-msg" method="post">
					<fieldset>
						<div class="am-form-group">
							<label for="doc-vld-name-2-1">用户名：</label> <input type="text"
								id="doc-vld-name-2-1" minlength="5" value="${user.username!}"
								name="username" placeholder="输入用户名（至少 5 个字符）*必填 " required />
						</div>

						<div class="am-form-group">
							<label for="doc-vld-name-2-1">密码：</label> <input type="password"
								id="doc-vld-name-2-1" minlength="5" ${user!!=null ? "readonly value='******' ":""} name="password"
								placeholder="输入密码（至少 5 个字符）*必填 " required /> <%
							if(user!!=null){ %>
							<button type="button"
								class="am-btn am-btn-primary btn-loading-example"
								data-am-loading="{spinner: 'circle-o-notch', loadingText: '加载中...', resetText: '重置密码'}">
								重置密码</button>
							<% } %>
						</div>

						<% if(user!!=null){ %>
						<div class="am-g am-margin-top-sm">
							<div class="am-u-sm-4 am-u-md-2 am-text-right">注册日期</div>
							<div class="am-u-sm-8 am-u-md-4 am-u-end">
								<!-- readonly -->
								${user.create_time,'yyyy-MM-dd hh:mm:ss'}
							</div>
						</div>
						<% } %> <br />
						
				<div class="am-form-group">
             	<label>是否管理员：</label>
              
              <% if(user!!=null){ %>
	              <label class="am-radio-inline">
	              
				    <input type="radio" name="is_admin" value="1" ${user.is_admin==1?"checked":""} data-am-ucheck> 是
				  
				  </label>
				  <label class="am-radio-inline">
				    <input type="radio" name="is_admin" value="" ${user.is_admin!=1?"checked":""} data-am-ucheck> 否
				  </label>
              <% }else{ %>
				  <label class="am-radio-inline">
	              
				    <input type="radio" name="is_admin" value="1"  data-am-ucheck required> 是
				  
				  </label>
				  <label class="am-radio-inline">
				    <input type="radio" name="is_admin" value=""   data-am-ucheck> 否
				  </label>
			 <% } %>
              
              </div>
						
						
						 <br />
					</fieldset>
					<div class="am-margin">
						<button id="but" type="submit"
							class="am-btn am-btn-primary am-btn-xs btn-loading-example"
							data-am-loading="{spinner: 'circle-o-notch', loadingText: '提交中...', resetText: '提交保存'}">
							立即提交</button>
						<button type="reset" class="am-btn am-btn-primary am-btn-xs">我要重置</button>
					</div>

				</form>

			</div>

			<footer class="admin-content-footer">
				<hr>
				<p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed
					under MIT license.</p>
			</footer>
		</div>
		<!-- content end -->

	</div>

	<a href="#"
		class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu"
		data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

	<footer>
		<hr>
		<p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under
			MIT license.</p>
	</footer>

	<% include("/common/inc/_js.html"){} %>

	<script type="text/javascript">
		$('.btn-loading-example').click(function() {
			var $btn = $(this)
			$btn.button('loading');
			setTimeout(function() {
				$btn.button('reset');
			}, 1000);
		});
	</script>

	<script type="text/javascript">
		$(function() {
			$('#doc-vld-msg')
					.validator(
							{
								onValid : function(validity) {
									$(validity.field).closest('.am-form-group')
											.find('.am-alert').hide();
								},

								onInValid : function(validity) {
									var $field = $(validity.field);
									var $group = $field
											.closest('.am-form-group');
									var $alert = $group.find('.am-alert');
									// 使用自定义的提示信息 或 插件内置的提示信息
									var msg = $field.data('validationMessage')
											|| this
													.getValidationMessage(validity);

									if (!$alert.length) {
										$alert = $(
												'<div class="am-alert am-alert-danger"></div>')
												.hide().appendTo($group);
									}

									$alert.html(msg).show();
								}
							});
		});
	</script>
</body>
</html>
